<template>
  <div
    class="showPanel flex flex-col gap-y-[20px] h-full animate__animated transitionPanel relative animate__fadeInLeft"
  >
    <div class="relative h-full text-[#fff]">
      <div
        class="absolute flex flex-col gap-y-[20px] top-0 left-0 right-0 bottom-0 pt-[50px] pl-[10px] pb-[50px]"
      >
        <base-card class="flex-1 overflow-hidden" title="每日空气质量分析">
          <template #rightTitle>
            <a-radio-group
              class="custom-radio-group"
              v-model:value="area1"
              button-style="solid"
              size="small"
              @change="changeTop"
            >
              <a-radio-button
                v-for="item in areas"
                :key="item.value"
                :value="item.value"
                class="!text-[14px] !font-normal !leading-[20px]"
              >
                {{ item.label }}
              </a-radio-button>
            </a-radio-group>
          </template>
          <base-chart :options="topOption" class="h-full"></base-chart>
        </base-card>
        <base-card class="flex-1 overflow-hidden" title="月度空气质量分析">
          <template #rightTitle>
            <a-radio-group
              class="custom-radio-group"
              v-model:value="area2"
              button-style="solid"
              size="small"
              @change="changeBottom"
            >
              <a-radio-button
                v-for="item in areas"
                :key="item.value"
                :value="item.value"
                class="!text-[14px] !font-normal !leading-[20px]"
              >
                {{ item.label }}
              </a-radio-button>
            </a-radio-group>
          </template>
          <base-chart :options="bottomOption" class="h-full"></base-chart>
        </base-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import BaseCard from "@/components/three/component/baseCard.vue";
import BaseChart from "@/components/three/component/baseChart/index.jsx";
import { onMounted, ref } from "vue";
import {
  getAirHistoryByDay,
  getAirHistoryByMonth,
} from "@/api/dataScreen/dataScreen.js";
import { map } from "lodash-es";

const topOption = ref({
  grid: {
    left: "12%",
    top: "10%",
    bottom: "15%",
    right: "8%",
  },
  tooltip: {
    confine: true,
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: "rgba(255,255,255,0.8)",
      },
    },
    backgroundColor: "rgba(0,0,0,0.6)",
    borderWidth: "0",
    textStyle: {
      color: "#fff",
    },
  },
  legend: {
    type: "scroll",
    textStyle: {
      color: "#fff",
    },
    top: 0,
    pageIconColor: "#fff",
    pageTextStyle: {
      color: "#fff",
    },
  },
  xAxis: {
    data: Array.from({ length: 31 }, (_, i) => `${i + 1}日`),
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255, 129, 109, 0.1)",
        width: 1,
      },
    },
    axisLabel: {
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
  },
  yAxis: [
    {
      splitNumber: 2,
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255, 129, 109, 0.1)",
          width: 1,
        },
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#111",
          width: 1,
          type: "dashed",
        },
      },
    },
  ],
  series: [
    {
      name: "PM10",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: Array.from(
        { length: 31 },
        () => +(1.2 + Math.random() * 0.2).toFixed(2),
      ),
    },
    {
      name: "PM2.5",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: Array.from(
        { length: 31 },
        () => +(1.3 + Math.random() * 0.2).toFixed(2),
      ),
    },
    {
      name: "二氧化碳",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: Array.from(
        { length: 31 },
        () => +(3.2 + Math.random() * 0.5).toFixed(2),
      ),
    },
    {
      name: "臭氧",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: Array.from(
        { length: 31 },
        () => +(0.1 + Math.random() * 0.05).toFixed(3),
      ),
    },
    {
      name: "二氧化硫",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: Array.from(
        { length: 31 },
        () => +(1.0 + Math.random() * 0.3).toFixed(2),
      ),
    },
    {
      name: "一氧化碳",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: Array.from(
        { length: 31 },
        () => +(2.5 + Math.random() * 0.3).toFixed(2),
      ),
    },
    {
      name: "TVOC",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: Array.from(
        { length: 31 },
        () => +(1.4 + Math.random() * 0.2).toFixed(2),
      ),
    },
  ],
});
const area1 = ref("1030544AA693");
const area2 = ref("1030544AA693");
const areas = ref([
  { label: "三大顷", value: "1030544AA693" },
  { label: "七台镇", value: "1430544AE419" },
  { label: "小海子", value: "1030544ACD99" },
]);
const bottomOption = ref({
  grid: {
    left: "12%",
    top: "10%",
    bottom: "15%",
    right: "8%",
  },
  tooltip: {
    confine: true,
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: "rgba(255,255,255,0.8)",
      },
    },
    backgroundColor: "rgba(0,0,0,0.6)",
    borderWidth: "0",
    textStyle: {
      color: "#fff",
    },
  },
  legend: {
    type: "scroll",
    textStyle: {
      color: "#fff",
    },
    top: 0,
    pageIconColor: "#fff",
    pageTextStyle: {
      color: "#fff",
    },
  },
  xAxis: {
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255, 129, 109, 0.1)",
        width: 1,
      },
    },
    axisLabel: {
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
  },
  yAxis: [
    {
      splitNumber: 2,
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255, 129, 109, 0.1)",
          width: 1,
        },
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#111",
          width: 1,
          type: "dashed",
        },
      },
    },
  ],
  series: [
    {
      name: "PM10",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: Array.from(
        { length: 12 },
        () => +(1.2 + Math.random() * 0.2).toFixed(2),
      ),
    },
    {
      name: "PM2.5",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: Array.from(
        { length: 12 },
        () => +(1.3 + Math.random() * 0.2).toFixed(2),
      ),
    },
    {
      name: "二氧化碳",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: Array.from(
        { length: 12 },
        () => +(3.2 + Math.random() * 0.5).toFixed(2),
      ),
    },
    {
      name: "臭氧",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: Array.from(
        { length: 12 },
        () => +(0.1 + Math.random() * 0.05).toFixed(3),
      ),
    },
    {
      name: "二氧化硫",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: Array.from(
        { length: 12 },
        () => +(1.0 + Math.random() * 0.3).toFixed(2),
      ),
    },
    {
      name: "一氧化碳",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: Array.from(
        { length: 12 },
        () => +(2.5 + Math.random() * 0.3).toFixed(2),
      ),
    },
    {
      name: "TVOC",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: Array.from(
        { length: 12 },
        () => +(1.4 + Math.random() * 0.2).toFixed(2),
      ),
    },
  ],
});
const changeTop = () => {
  getAirHistoryByDay({ serialNumber: area1.value }).then((res) => {
    console.log(res);
    if (res.code === 200) {
      const data = res.data;
      console.log(res.data[0]);
      topOption.value.xAxis.data = map(res.data[0].data, "time");
      console.log(topOption.value.xAxis.data);
      topOption.value.series = [];
      res.data.map((item) => {
        topOption.value.series.push({
          name: item.key,
          type: "line",
          smooth: true,
          showSymbol: false,
          data: map(item.data, "avgValue").map((item) =>
            Number(item).toFixed(2),
          ),
        });
      });
    }
  });
};
const changeBottom = () => {
  getAirHistoryByMonth({ serialNumber: area2.value }).then((res) => {
    console.log(res);
    if (res.code === 200) {
      const data = res.data;
      bottomOption.value.xAxis.data = map(res.data[0].data, "time");
      bottomOption.value.series = [];
      res.data.map((item) => {
        bottomOption.value.series.push({
          name: item.key,
          type: "line",
          smooth: true,
          showSymbol: false,
          data: map(item.data, "avgValue").map((item) =>
            Number(item).toFixed(2),
          ),
        });
      });
    }
  });
};
onMounted(() => {
  changeTop();
  changeBottom();
});
</script>
<style scoped lang="less">
.custom-radio-group {
  :deep(.ant-radio-button-wrapper) {
    background-color: rgba(25, 45, 67, 0.3);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
  }

  :deep(.ant-radio-button-wrapper-checked) {
    background-color: #1e4a6d;
    color: #fff;
    border-color: #409eff;
  }

  :deep(.ant-radio-button-wrapper:not(:first-child)) {
    border-left: none;
  }
}
</style>
